import {selectPeriodTypeByTypeCode} from '@/api/evalutaion'
import {CCard} from '@/components/card'
import {CnMediumSpan, CnNormalP} from '@/components/text'
import {getDeparts, getDepartAndUser, getDDUsers} from '@/libs/dingding'
import {defineComponent, reactive, ref, watch, onMounted} from 'vue'
import {
  JichuxinxiTable,
  JichuxinxiTHead,
  JichuxinxiTR,
  JichuxinxiTh,
  JichuxinxiTBody,
  periodTypeProps,
  periodTypeEmit,
  pmGroupNameEmit,
  pmGroupNameProps,
  pmGroupEmployeeProps,
  pmGroupEmployeeEmit,
  pmPeriodCodeEnum,
  JichuxinxiTdLabel,
  JichuxinxiTdValue,
  AppointScoreSwitchProps,
  AppointScoreSwitchEmit,
  pmGroupExcUserProps,
  proupmGEmployeeEmiEmit
} from './components/baseInfoComp'

const Jichuxinxi = defineComponent({
  props: {
    ...pmGroupExcUserProps,
    ...AppointScoreSwitchProps,
    ...periodTypeProps,
    ...pmGroupNameProps,
    ...pmGroupEmployeeProps
  },
  emits: {
    ...proupmGEmployeeEmiEmit,
    ...periodTypeEmit,
    ...pmGroupNameEmit,
    ...pmGroupEmployeeEmit,
    ...AppointScoreSwitchEmit
  },
  setup(props, {emit}) {
    let state = reactive<{
      /**考核表名称 */
      pmGroupName: string
      /**指定评分人开关 */
      appointScoreSwitch: 0 | 1
      /**考核组备注 */
      pmGroupDesc: string
      /**周期类型code */
      pmPeriodCode: PmPeriodCode
      /**周期类型名称 */
      pmPeriodName: PmPeriodName
      /**考核组人员列表 */
      pmGroupUserList: Evaluation.PmGroupUser[]
      /**考核组部门列表 */
      pmGroupDeptList: Evaluation.PmGroupDept[]
      pmGroupExcUserList: Evaluation.PmGroupExcUser[]
    }>({
      pmGroupDesc: '',
      appointScoreSwitch: 0,
      pmGroupName: '',
      pmPeriodName: '月度',
      pmPeriodCode: '0025',
      pmGroupDeptList: [],
      pmGroupUserList: [],
      pmGroupExcUserList: []
    })

    /**周期类型 单选数据列表 */
    let pmPeriodList = ref<{label: string; value: string}[]>([
      // {label: '月度', value: '0025'},
      // {label: '季度', value: '0026'},
      // {label: '半年度', value: '0027'},
      // {label: '年度', value: '0028'},
      // {label: '自定义', value: '0029'}
    ])

    watch(
      () => props.pmGroupName,
      n => {
        state.pmGroupName = n || ''
      },
      {immediate: true}
    )

    watch(
      () => state.pmGroupName,
      n => {
        emit('update:pmGroupName', n)
      }
    )

    watch(
      () => props.pmPeriodCode,
      n => {
        state.pmPeriodCode = n || '0025'
      },
      {immediate: true}
    )

    watch(
      () => props.pmPeriodName,
      n => {
        state.pmPeriodName = n || '月度'
      },
      {immediate: true}
    )

    watch(
      () => props.appointScoreSwitch,
      n => {
        state.appointScoreSwitch = n || 0
      },
      {immediate: true}
    )

    watch(
      () => state.pmPeriodCode,
      n => {
        emit('update:pmPeriodCode', n)
        emit('update:pmPeriodName', pmPeriodCodeEnum[n])
      }
    )

    watch(
      () => props.pmGroupUserList,
      n => {
        state.pmGroupUserList = n || []
      },
      {immediate: true}
    )

    watch(
      () => props.pmGroupDeptList,
      n => {
        state.pmGroupDeptList = n || []
      },
      {immediate: true}
    )

    watch(
      () => state.pmGroupDeptList,
      n => {
        emit('update:pmGroupDeptList', n)
      }
    )

    watch(
      () => state.pmGroupUserList,
      n => {
        emit('update:pmGroupUserList', n)
      }
    )

    watch(
      () => state.appointScoreSwitch,
      n => {
        emit('update:appointScoreSwitch', n)
      }
    )

    watch(
      () => props.pmGroupExcUserList,
      n => {
        state.pmGroupExcUserList = n || []
      },
      {immediate: true}
    )

    watch(
      () => state.pmGroupExcUserList,
      n => {
        emit('update:pmGroupExcUserList', n)
      }
    )

    function getPageData() {
      selectPeriodTypeByTypeCode()
        .then(res => {
          pmPeriodList.value = res.data.map(item => ({label: item.dictName, value: item.dictCode}))
        })
        .catch(err => {})
    }

    /**选择部门 */
    function handleGetDepartClick() {
      let pickedDepartments = state.pmGroupDeptList.map(item => item.pmGroupDeptDDId)

      console.log('已选择部门', pickedDepartments)

      getDeparts({pickedDepartments})
        .then(res => {
          if (res !== 'cancel') {
            state.pmGroupDeptList = res.departments.map((item: {id: any; name: any}) => ({
              pmGroupDeptId: -1,
              pmGroupId: -1,
              pmGroupDeptDDId: item.id,
              pmGroupDeptName: item.name
            }))
          }
        })
        .catch(err => {})
    }
    // 删除部门
    function handleDepartTagClose(idx: number) {
      state.pmGroupDeptList.splice(idx, 1)
    }
    // 选择员工
    function handleGetUsersClick() {
      let users = state.pmGroupUserList.map(item => item.pmGroupUserDDId)
      console.log(users)

      getDDUsers({users})
        .then(res => {
          if (res !== 'cancel') {
            state.pmGroupUserList = res.map((item: any) => ({
              pmGroupDeptId: -1,
              pmGroupId: -1,
              pmGroupUserDDId: item.emplId,
              pmGroupUserName: item.name
            }))
          }
        })
        .catch(err => {})
    }
    // 删除员工
    function handleUserTagClose(idx: number) {
      state.pmGroupUserList.splice(idx, 1)
    }
    // 选择排除人
    function handleGetExcUsers() {
      let users = state.pmGroupExcUserList.map(item => item.pmGroupExcUserDDId)
      getDDUsers({users})
        .then(res => {
          if (res !== 'cancel') {
            state.pmGroupExcUserList = res.map((item: any) => ({
              pmGroupExcUserDDId: item.emplId,
              pmGroupExcUserId: -1,
              pmGroupId: -1,
              pmGroupExcUserName: item.name,
              pmGroupDeptDDId: '',
              pmGroupDeptName: ''
            }))
          }
        })
        .catch(err => {})
    }
    // 删除排除人
    function handleExcUserTagClose(idx: number) {
      state.pmGroupExcUserList.splice(idx, 1)
    }

    onMounted(() => {
      getPageData()
    })

    return () => (
      <CCard title='基础信息' showTitle={false} class='mb-18 border-0'>
        <JichuxinxiTable class='mx-auto w-600'>
          <JichuxinxiTHead>
            <JichuxinxiTR>
              <JichuxinxiTh>基本信息</JichuxinxiTh>
              <JichuxinxiTh></JichuxinxiTh>
            </JichuxinxiTR>
          </JichuxinxiTHead>
          <JichuxinxiTBody>
            <JichuxinxiTR>
              <JichuxinxiTdLabel>考评组名称:</JichuxinxiTdLabel>
              <JichuxinxiTdValue>
                <a-input
                  class='rounded-4 w-300'
                  placeholder='请输入名称'
                  v-model={[state.pmGroupName, 'value']}
                ></a-input>
              </JichuxinxiTdValue>
            </JichuxinxiTR>
            <JichuxinxiTR>
              <JichuxinxiTdLabel>周期类型:</JichuxinxiTdLabel>
              <JichuxinxiTdValue>
                <a-radio-group
                  class=' text-12'
                  v-model={[state.pmPeriodCode, 'value']}
                  size='small'
                  name='zhouqileixing'
                >
                  {pmPeriodList.value.map((option, i) => (
                    <a-radio value={option.value}>{option.label}</a-radio>
                  ))}
                </a-radio-group>
              </JichuxinxiTdValue>
            </JichuxinxiTR>
            <JichuxinxiTR>
              <JichuxinxiTdLabel>指定评分人:</JichuxinxiTdLabel>
              <JichuxinxiTdValue>
                <a-switch
                  v-model={[state.appointScoreSwitch, 'checked']}
                  checkedChildren='允许'
                  checkedValue={1}
                  unCheckedValue={0}
                  unCheckedChildren='不允许'
                ></a-switch>
              </JichuxinxiTdValue>
            </JichuxinxiTR>
          </JichuxinxiTBody>
          <JichuxinxiTHead>
            <JichuxinxiTR>
              <JichuxinxiTh>被考核人员</JichuxinxiTh>
              <JichuxinxiTh></JichuxinxiTh>
            </JichuxinxiTR>
          </JichuxinxiTHead>
          <JichuxinxiTBody>
            <JichuxinxiTR>
              <JichuxinxiTdLabel class='flex items-start justify-end'>考评员工:</JichuxinxiTdLabel>
              <JichuxinxiTdValue>
                {state.pmGroupDeptList.length || state.pmGroupUserList.length ? (
                  <div class='flex flex-col gap-y-12 mb-12'>
                    {state.pmGroupDeptList.length ? (
                      <div class='w-full flex gap-x-8'>
                        {/* <CnMediumSpan>已选择的部门:</CnMediumSpan> */}
                        <div class='flex-1 flex flex-wrap items-center gap-x-8 gap-y-7'>
                          {state.pmGroupDeptList.map((item, idx) => (
                            <a-tag
                              class='flex text-12'
                              color='#108ee9'
                              closable
                              v-slots={{
                                closeIcon: () => (
                                  <i
                                    class='inline-block iconfont icon-x text-12 text-black'
                                    onClick={() => handleDepartTagClose(idx)}
                                  ></i>
                                )
                              }}
                            >
                              {item.pmGroupDeptName}
                            </a-tag>
                          ))}
                        </div>
                      </div>
                    ) : null}
                    {state.pmGroupUserList.length ? (
                      <div class='w-full flex gap-x-8'>
                        {/* <CnMediumSpan>已选择的员工:</CnMediumSpan> */}
                        <div class='flex-1 flex flex-wrap items-center gap-x-8 gap-y-7'>
                          {state.pmGroupUserList.map((item, idx) => (
                            <a-tag
                              class='flex text-12'
                              color='blue'
                              closable
                              v-slots={{
                                closeIcon: () => (
                                  <i
                                    class='inline-block iconfont icon-x text-12 text-black'
                                    onClick={() => handleUserTagClose(idx)}
                                  ></i>
                                )
                              }}
                            >
                              {item.pmGroupUserName}
                            </a-tag>
                          ))}
                        </div>
                      </div>
                    ) : null}
                  </div>
                ) : null}

                <div>
                  <div class='flex items-center gap-x-12 mb-12'>
                    <a-button
                      class=' text-12 bg-primary text-white'
                      type='primary'
                      v-slots={{
                        icon: () => <i class='iconfont icon-jiahao1 text-12 mr-4'></i>
                      }}
                      onClick={handleGetDepartClick}
                    >
                      选部门
                    </a-button>
                    <a-button
                      class=' text-12 bg-primary text-white'
                      type='primary'
                      v-slots={{
                        icon: () => <i class='iconfont icon-jiahao1 text-12 mr-4'></i>
                      }}
                      onClick={handleGetUsersClick}
                    >
                      选人员
                    </a-button>
                  </div>
                  <CnNormalP>按部门设置，新加入部门的员工将自动加入考评组</CnNormalP>
                </div>
              </JichuxinxiTdValue>
            </JichuxinxiTR>

            <JichuxinxiTR>
              <JichuxinxiTdLabel class='pt-16 flex items-start justify-end'>
                排除:
              </JichuxinxiTdLabel>
              <JichuxinxiTdValue class='pt-16'>
                {state.pmGroupExcUserList.length ? (
                  <div class='flex flex-col gap-y-12 mb-12'>
                    <div class='w-full flex gap-x-8'>
                      {/* <CnMediumSpan>已选择的人员:</CnMediumSpan> */}
                      <div class='flex-1 flex flex-wrap items-center gap-x-8 gap-y-7'>
                        {state.pmGroupExcUserList.map((item, idx) => (
                          <a-tag
                            class='flex'
                            color='blue'
                            closable
                            v-slots={{
                              closeIcon: () => (
                                <i
                                  class='inline-block iconfont icon-x text-12 text-black'
                                  onClick={() => handleExcUserTagClose(idx)}
                                ></i>
                              )
                            }}
                          >
                            {item.pmGroupExcUserName}
                          </a-tag>
                        ))}
                      </div>
                    </div>
                  </div>
                ) : null}
                <div>
                  <div class='flex items-center gap-x-12 mb-12'>
                    <a-button
                      class=' text-12 bg-primary text-white'
                      type='primary'
                      v-slots={{
                        icon: () => <i class='iconfont icon-jiahao1 text-12 mr-4'></i>
                      }}
                      onClick={handleGetExcUsers}
                    >
                      选人员
                    </a-button>
                  </div>
                  <CnNormalP>选择的人员,将在发起考核的时候排除掉</CnNormalP>
                </div>
              </JichuxinxiTdValue>
            </JichuxinxiTR>
          </JichuxinxiTBody>
        </JichuxinxiTable>
      </CCard>
    )
  }
})
export default Jichuxinxi
